<template>
 <div class='deader' style="height: 100%;"> 
    <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          router
          style="height: 100%;"
          :collapse="isshow"
          text-color="#fff" >
          <img :src="imgs" alt="" v-show="!isshow ">
          <el-menu-item :index='item.auth_path' v-for="item in acl" :key="item.id"  v-show="item.children.length == 0">
                      <el-icon><icon-menu /></el-icon>
                      <span   >{{item.auth_name}}</span>
                  </el-menu-item>
                  <el-sub-menu :index="item.auth_path" v-for="item in acl" :key="item.id" v-show="item.children.length !=  0">
                      <template #title>
                          <el-icon><location /></el-icon>
                          <span >{{ item.auth_name }}</span>
                      </template>
  
                      <el-menu-item :index="v.auth_path" v-for=" v in item.children" :key="v.id"  >
                      <span >{{ v.auth_name }}</span>
                  </el-menu-item>
                  </el-sub-menu>
              </el-menu>
 </div>
</template>
<script setup lang='ts'>
import {ref,defineProps} from 'vue'

import imgs from '@/imgs/1682560463072.jpg'
  const acl = JSON.parse((localStorage.getItem('acl')) as any) 
  
const props = defineProps<{
    isshow:boolean
}>()


</script>
<style lang='scss' scoped>
.deader{
    height: 100%;
}
</style>
